<template>
  <div class="approval-container">
    <el-table v-loading="loading" :data="approvalList" style="width: 100%">
      <el-table-column label="图标" width="100">
        <template #default="{ row }">
          <el-image
            :src="row.iconUrl"
            class="icon-image"
            fit="cover"
          />
        </template>
      </el-table-column>
      
      <el-table-column prop="flowTitle" width="200" label="模版名称" />
      
      <el-table-column prop="processCode" label="模版代码" show-overflow-tooltip />
      
      <el-table-column label="模版状态" width="180">
        <template #default="{ row }">
          <el-tag :type="row.newProcess ? 'success' : 'info'" >
            {{ row.newProcess ? '新模版' : '旧模版' }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column label="考勤类型" width="160">
        <template #default="{ row }">
          <span>{{ getAttendanceTypeText(row.attendanceType) }}</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="gmtModified" label="修改时间" width="200" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getApprovalList } from '@/api/Approval'

interface ApprovalItem {
  id: number
  flowTitle: string
  processCode: string
  newProcess: boolean
  gmtModified: string
  attendanceType: number
  iconUrl: string
  iconName: string
}

const approvalList = ref<ApprovalItem[]>([])

const loading=ref(false)

const getAttendanceTypeText = (type: number) => {
  const typeMap: Record<number, string> = {
    0: '无',
    1: '补卡申请',
    2: '请假',
    3: '出差',
    4: '加班',
    5: '外出'
  }
  return typeMap[type] || '未知类型'
}

onMounted(async () => {
  loading.value=true
  try {
    const res = await getApprovalList()
    approvalList.value = res.data
    loading.value=false 
  } catch (error) {
    console.error('获取审批列表失败:', error)
  }
})
</script>

<style lang="scss" scoped>
.approval-container {
  padding: 20px;
  
  .icon-image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
  
  :deep(.el-table) {
    border-radius: 8px;
    
    .el-table__header-wrapper {
      th {
        background-color: #f5f7fa;
        color: #606266;
      }
    }
  }
}
</style>